<template>
  <div class="menu-top">
    <MenuMain></MenuMain>
  </div>
  <div class="menu-control">
    <MenuControl></MenuControl>
  </div>
  <div class="table-edit">
    <TableEdit></TableEdit>
  </div>
  <Dialog></Dialog>
</template>

<script setup>
import KeyBoard from "@/libs/key-board";
import MenuMain from "./MenuMain.vue";
import MenuControl from "./MenuControl.vue";
import TableEdit from "./TableEdit.vue";
import Dialog from "@/views/popup/Dialog.vue";

KeyBoard();
</script>

<style lang="scss" scoped>
.menu-top {
  height: 40px;
  background: #eee;
  border-bottom: 1px solid #ccc;
}

.menu-control {
  height: 80px;
  background: #eee;
  border-bottom: 1px solid #ccc;
}

.table-edit {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: calc(100% - 122px);
}
</style>
